CSS Motion Pathã®`auto-orient`ããããã£ã䜿ãããªãããã€ãããã¯ãªã¢ãã¡ãŒã·ã§ã³ãå®çŸãèŠçŽ ããã¹ã«æ²¿ã£ãŠèªåå転ãããèŠèŠçã«é åçã§åŒã蟌ãŸãããããªãŠãŒã¶ãŒäœéšãåµãåºãæ¹æ³ãåŠã³ãŸããããæ¬ã¬ã€ãã§ã¯æ§æãäœ¿çšæ³ãå¿çšæè¡ã解説ããŸãã
CSS Motion Path Auto Orient: ãã¹ã«æ²¿ã£ãèªåå転ã®å æ¬çã¬ã€ã
CSS Motion Pathã䜿ããšãéçºè
ã¯æå®ããããã¹ã«æ²¿ã£ãŠèŠçŽ ãåãããè€éã§èŠèŠçã«é
åçãªã¢ãã¡ãŒã·ã§ã³ãäœæã§ããŸããMotion Pathã®äžã§ãç¹ã«åŒ·åãªæ©èœã®äžã€ãauto-orientããããã£ã§ãããã®ããããã£ã¯ãèŠçŽ ããã¹ã®æ¹åã«è¿œåŸããŠèªåçã«å転ããããã«ããèªç¶ã§çŽæçãªã¢ãŒã·ã§ã³å¹æã®äœæã倧å¹
ã«ç°¡çŽ åããŸããæ¬ã¬ã€ãã§ã¯ãauto-orientã«ã€ããŠããã®æ§æãå®çšäŸãé«åºŠãªäœ¿çšã·ããªãªãŸã§ã詳ãã解説ããŸãã
CSS Motion Pathãšã¯ïŒ
auto-orientã詳ããèŠãåã«ãCSS Motion Pathã«ã€ããŠç°¡åã«ããããããŸããããMotion Pathã䜿çšãããšãèŠçŽ ãã¢ãã¡ãŒã·ã§ã³äžã«è¿œåŸãããã¹ïŒéåžžã¯SVGãã¹ïŒãå®çŸ©ã§ããŸããããã«ãããåçŽãªç·åœ¢ãã©ã³ãžã·ã§ã³ãã¯ããã«è¶
ããæ²ç·çã§è€éãªãçã«ã«ã¹ã¿ã ãªã¢ãã¡ãŒã·ã§ã³ã·ãŒã±ã³ã¹ãå¯èœã«ãªããŸãã
Motion Pathã䜿çšããéã®äž»èŠãªããããã£ã¯ä»¥äžã®éãã§ãïŒ
offset-path: èŠçŽ ã远åŸãããã¹ãæå®ããŸããSVGãã¹èŠçŽ ãžã®URLãåºæ¬å³åœ¢ããŸãã¯SVGãã¹ããŒã¿ãå«ãpath()颿°ãæå®ã§ããŸããoffset-distance: ãã¹ã«æ²¿ã£ãèŠçŽ ã®äœçœ®ãããŒã»ã³ããŒãžã§å®çŸ©ããŸãã0%ããã¹ã®éå§ç¹ã100%ãçµäºç¹ã§ããoffset-rotate: (auto-orientã«é¢é£) ãã¹ã«æ²¿ã£ãŠç§»åããèŠçŽ ãæåã§å転ãããããšãã§ããŸããauto-orientã¯ããããããç°¡åã«èªååããæ¹æ³ãæäŸããŸãã
auto-orientã®çè§£
auto-orientããããã£ã¯ãèŠçŽ ãçŸåšã®äœçœ®ã«ãããã¢ãŒã·ã§ã³ãã¹ã®æ¥ç·ã«åãããŠèªåçã«å転ãããã©ãããæ±ºå®ããŸããããã«ãããç¹ã«ãã¹ã«ã«ãŒããæ¹å転æãå«ãŸããå Žåã«ãããèªç¶ãªèŠãç®ã®ã¢ãã¡ãŒã·ã§ã³ãäœæãããŸãã
æ§æ
auto-orientããããã£ã¯ä»¥äžã®å€ãåãå
¥ããŸãïŒ
auto: èŠçŽ ããã¹ã®æ¥ç·ã«åãããŠå転ããŸãããããæãäžè¬çã§äŸ¿å©ãªå€ã§ããauto <angle>: èŠçŽ ããã¹ã®æ¥ç·ã«åãããããã«è¿œå ã®è§åºŠãå ããŠå転ããŸããããã«ãããèŠçŽ ã®åãã埮調æŽã§ããŸããnone: èŠçŽ ã¯å転ããŸããããã¹ã®æ¹åã«é¢ä¿ãªããå ã®åããç¶æããŸãã
åºæ¬äŸ
auto-orient: autoã®äœ¿çšæ³ã瀺ãç°¡åãªäŸã§ãïŒ
<svg width="300" height="200">
<path id="myPath" d="M20,20 C20,100 200,100 200,20" fill="none" stroke="black"/>
</svg>
<div class="box"></div>
.box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
offset-path: path('M20,20 C20,100 200,100 200,20');
offset-distance: 0%;
animation: move 4s linear infinite;
offset-rotate: auto;
}
@keyframes move {
to {
offset-distance: 100%;
}
}
ãã®äŸã§ã¯ã.boxèŠçŽ ã¯SVGã§å®çŸ©ãããæ²ç·ãã¹ã«æ²¿ã£ãŠç§»åããŸããoffset-rotate: auto;ããããã£ã«ãããããã¯ã¹ã¯ç§»åäžã«ãã¹ã®ã«ãŒãã«åãããŠå転ããŸãããã®ããããã£ããªãå Žåãããã¯ã¹ã¯å転ããã«ãã¹ã«æ²¿ã£ãŠç§»åãããããäžèªç¶ã«èŠããå¯èœæ§ããããŸãã
auto-orientã®å®çšçãªå¿çšäŸ
auto-orientã¯éåžžã«å€çšéã§ãæ§ã
ãªã·ããªãªã§ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã匷åããé
åçãªã¢ãã¡ãŒã·ã§ã³ãäœæããããã«äœ¿çšã§ããŸãã以äžã«ããã€ãã®å®çšäŸã瀺ããŸãïŒ
1. ãã¹ã«æ²¿ã£ãŠé£ã¶èªç©ºæ©
å°å³äžãé£ã¶é£è¡æ©ãã¢ãã¡ãŒã·ã§ã³åããããšãæ³åããŠã¿ãŠãã ãããauto-orientã䜿çšãããšãé£è¡æ©ãåžžã«é²è¡æ¹åãåãããã«ãªãããªã¢ã«ãªå¹æãçã¿åºããŸãã
<svg width="500" height="300">
<path id="flightPath" d="M50,250 C150,50 350,50 450,250" fill="none" stroke="#ccc" stroke-width="2"/>
</svg>
<img class="airplane" src="airplane.png" alt="Airplane">
.airplane {
width: 50px;
position: absolute;
offset-path: path('M50,250 C150,50 350,50 450,250');
offset-distance: 0%;
animation: fly 5s linear infinite;
offset-rotate: auto;
transform-origin: center;
}
@keyframes fly {
to {
offset-distance: 100%;
}
}
éèŠïŒtransform-originãé©åã«èšå®ãããŠããããšã確èªããŠãã ãããcenterãŸãã¯50% 50%ã«èšå®ãããšãé£è¡æ©ã®ç»åã®äžå¿åšãã§å転ãèµ·ãããŸãã
ã°ããŒãã«ãªæèïŒãã®çš®ã®ã¢ãã¡ãŒã·ã§ã³ã¯ãæ è¡äºçŽãµã€ããç©æµè¿œè·¡ãã©ãããã©ãŒã ã§ãååã人ã®ç°ãªãå Žæéã®ç§»åãèŠèŠçã«è¡šçŸããããã«ãã䜿çšãããŸãã
2. éè·¯ãå·ã«æ²¿ã£ãŠé²ã
auto-orientã䜿çšããŠãéè·¯ãèµ°ãè»ããSVGãã¹ãšããŠæãããå·ãäžãããŒããã¢ãã¡ãŒã·ã§ã³åã§ããŸããããã¯ãã€ã³ã¿ã©ã¯ãã£ããªå°å³ãæè²ã¢ããªã±ãŒã·ã§ã³ã§ç¹ã«åœ¹ç«ã¡ãŸãã
<svg width="500" height="300">
<path id="roadPath" d="M50,250 Q250,50 450,250" fill="none" stroke="#666" stroke-width="4"/>
</svg>
<img class="car" src="car.png" alt="Car">
.car {
width: 40px;
position: absolute;
offset-path: path('M50,250 Q250,50 450,250');
offset-distance: 0%;
animation: drive 6s linear infinite;
offset-rotate: auto;
transform-origin: center;
}
@keyframes drive {
to {
offset-distance: 100%;
}
}
èæ ®äºé ïŒãªã¢ã«ãªã¢ãã¡ãŒã·ã§ã³ã®ããã«ã¯ããã¹ã®ç°ãªãã»ã¯ã·ã§ã³ã§é床ãå€ããŠå éãæžéãã·ãã¥ã¬ãŒãããããšãæ€èšããŠãã ãããããã¯CSSã®ã¿ã€ãã³ã°é¢æ°ã䜿çšããããã¢ãã¡ãŒã·ã§ã³ãè€æ°ã®ããŒãã¬ãŒã ã«åå²ããããšã§å®çŸã§ããŸãã
3. æµç·ã«æ²¿ã£ãŠæµããããŒãã£ã¯ã«
ããŒã¿å¯èŠåãã·ãã¥ã¬ãŒã·ã§ã³ã§ã¯ãæµç·ã«æ²¿ã£ãŠæµããããŒãã£ã¯ã«ãã¢ãã¡ãŒã·ã§ã³åãããå ŽåããããŸããauto-orientã䜿çšãããšããããã®ããŒãã£ã¯ã«ãæµãã®æ¹åã«åãããŠåããå€ããããŒã¿ã®æç¢ºãªèŠèŠç衚çŸãäœæã§ããŸãã
<svg width="500" height="300">
<path id="streamlinePath" d="M50,150 C150,50 350,250 450,150" fill="none" stroke="#007bff" stroke-width="2"/>
</svg>
<div class="particle"></div>
.particle {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #007bff;
position: absolute;
offset-path: path('M50,150 C150,50 350,250 450,150');
offset-distance: 0%;
animation: flow 3s linear infinite;
offset-rotate: auto;
transform-origin: center;
}
@keyframes flow {
to {
offset-distance: 100%;
}
}
é«åºŠãªãã¯ããã¯ïŒå¹æãé«ããã«ã¯ãã¢ãã¡ãŒã·ã§ã³ã®éå§æéããããã«ããããè€æ°ã®ããŒãã£ã¯ã«ã䜿çšããŠãããæµåçã§ãã€ãããã¯ãªæµããäœæããããšãæ€èšããŠãã ããã
4. è€éãªUIã¢ãã¡ãŒã·ã§ã³
ããè€éãªUIã¢ãã¡ãŒã·ã§ã³ã§ã¯ãauto-orientã¯ã«ã¹ã¿ã èŠçŽ ãè€éãªãã¹ã«æ²¿ã£ãŠèªå°ããé
åçãªãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ãäœæã§ããŸããäŸãã°ãæ²ããããã£ããã¹ããã©ãããã°ã¬ã¹ã€ã³ãžã±ãŒã¿ãŒããç»é¢äžã®ç°ãªãèŠçŽ ãæã瀺ããã¥ãŒããªã¢ã«ã¬ã€ãã®ã¢ãã¡ãŒã·ã§ã³ãªã©ã§ãã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
1. auto <angle>ã䜿ã£ã埮調æŽ
auto <angle>å€ã䜿çšãããšãèŠçŽ ã®åãã«éçãªå転ãªãã»ããã远å ã§ããŸããããã¯ãèŠçŽ ã®èªç¶ãªåãããã¹ã®æ¥ç·ãšå®å
šã«äžèŽããªãå Žåã«äŸ¿å©ã§ããäŸãã°ãé£è¡æ©ã®ç»åããããã«åŸããŠããå Žåãauto 10degã䜿çšããŠãã®åããä¿®æ£ã§ããŸãã
.airplane {
/* ... ä»ã®ã¹ã¿ã€ã« ... */
offset-rotate: auto 10deg;
}
2. CSS Transformãšã®çµã¿åãã
auto-orientãscaleãskewãtranslateãªã©ã®ä»ã®CSS Transformãšçµã¿åãããããšã§ãããã«è€éã§è峿·±ãã¢ãã¡ãŒã·ã§ã³ãäœæã§ããŸãããã ããTransformãé©çšãããé åºã¯æçµçµæã«åœ±é¿ãäžããå¯èœæ§ããããããæ³šæãå¿
èŠã§ãã
3. ã¬ã¹ãã³ã·ããã¶ã€ã³ãšã¢ãŒã·ã§ã³ãã¹
ã¬ã¹ãã³ã·ããã¶ã€ã³ã§Motion Pathã䜿çšããå ŽåãSVGãã¹ãç°ãªãç»é¢ãµã€ãºã«åãããŠé©åã«ã¹ã±ãŒãªã³ã°ãããããã«ããŠãã ãããããã€ã¹éã§äžè²«ããèŠèŠäœéšãç¶æããããã«ãã¡ãã£ã¢ã¯ãšãªã䜿çšããŠãã¹ãã¢ãã¡ãŒã·ã§ã³ã®ãã©ã¡ãŒã¿ã調æŽããå¿ èŠããããããããŸããã
SVGãã¹å®çŸ©å
ã§çžå¯ŸåäœïŒããŒã»ã³ããŒãžïŒã䜿çšããŠããã¥ãŒããŒãã«åãããŠæ¯äŸçã«ã¹ã±ãŒãªã³ã°ãããããã«ããããšãæ€èšããŠãã ããããŸããèŠçŽ ã®å¹
ãšé«ãã«åºå®ãã¯ã»ã«å€ã䜿çšããã®ãé¿ãã代ããã«vwãvhã®ãããªçžå¯Ÿåäœã䜿çšããŠãã ããã
4. ããã©ãŒãã³ã¹ã«é¢ããèæ ®äºé
è€éãªãã¹ã«æ²¿ã£ãŠèŠçŽ ãã¢ãã¡ãŒã·ã§ã³åããããšã¯ãèšç®è² è·ãé«ããªãå¯èœæ§ããããŸããããã©ãŒãã³ã¹ãæé©åããã«ã¯ãSVGãã¹ã®ãã€ã³ãæ°ãæå°éã«æããåæã«ã¢ãã¡ãŒã·ã§ã³åããèŠçŽ ãå€ãããªãããã«ããŠãã ããããŸããããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ã䜿çšãããšãç¹å®ã®ããã€ã¹ã§ã®ã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ãåäžããŸãã
will-changeããããã£ã䜿çšããŠããã©ãŠã¶ã«èŠçŽ ãã¢ãã¡ãŒã·ã§ã³åãããããšãäŒããããã«å¿ããŠã¬ã³ããªã³ã°ãæé©åãããããšãã§ããŸãããã ããwill-changeã®äœ¿ãããã¯ããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããããæ§ããã«äœ¿çšããŠãã ããã
5. ãã©ãŠã¶ã®äºææ§
CSS Motion Pathãšauto-orientã¯ãã¢ãã³ãã©ãŠã¶ã§è¯å¥œãªãµããŒãç¶æ³ã§ãããã ããæ¬çªç°å¢ã«ã¢ãã¡ãŒã·ã§ã³ãå±éããåã«ãCan I useãªã©ã®ãªãœãŒã¹ã§ææ°ã®äºææ§ããŒãã«ã確èªããããšããå§ãããŸãã
Motion PathããµããŒãããŠããªãå€ããã©ãŠã¶ã«ã¯ãåŸæ¥ã®CSSãã©ã³ãžã·ã§ã³ãJavaScriptããŒã¹ã®ã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã䜿çšããŠãã©ãŒã«ããã¯ãæäŸã§ããŸãã
SVGãã¹ã®äœæ
SVGãã¹ã¯ãã¢ãŒã·ã§ã³ãã¹ã¢ãã¡ãŒã·ã§ã³ã®äžå¿ã§ãã以äžã«ãããããçè§£ãäœæããããã®ç°¡åãªã¬ã€ãã瀺ããŸãïŒ
- M (moveto): çŸåšã®ç¹ãæå®ããã座æšã«ç§»åããŸããäŸïŒ
M10,10 - L (lineto): çŸåšã®ç¹ããæå®ããã座æšãŸã§çŽç·ãæããŸããäŸïŒ
L100,10 - H (horizontal lineto): æå®ãããx座æšãŸã§æ°Žå¹³ç·ãæããŸããäŸïŒ
H200 - V (vertical lineto): æå®ãããy座æšãŸã§åçŽç·ãæããŸããäŸïŒ
V50 - C (curveto): 2ã€ã®å¶åŸ¡ç¹ã䜿ããçŸåšã®ç¹ããæå®ãããçµç¹ãŸã§3次ããžã§æ²ç·ãæããŸããäŸïŒ
C50,50 150,50 200,100 - Q (quadratic curveto): 1ã€ã®å¶åŸ¡ç¹ã䜿ããçŸåšã®ç¹ããæå®ãããçµç¹ãŸã§2次ããžã§æ²ç·ãæããŸããäŸïŒ
Q100,50 150,100 - A (arc): æå®ãããçµç¹ãŸã§æ¥å匧ãæããŸããäŸïŒ
A50,30 0 1,0 150,100(匧ã®åœ¢ç¶ã«ã¯ããå€ãã®ãã©ã¡ãŒã¿ãå¿ èŠã§ã) - Z (closepath): éå§ç¹ãŸã§çŽç·ãæããŠçŸåšã®ãã¹ãéããŸãã
ãããã®ã³ãã³ãã®å°æåçïŒäŸïŒ m, l, cïŒã¯çžå¯Ÿçã§ã座æšãçŸåšã®ç¹ããã®çžå¯Ÿäœçœ®ã§ããããšãæå³ããŸãã
Adobe IllustratorãInkscapeãFigmaãªã©ã®ãã¯ã¿ãŒã°ã©ãã£ãã¯ãšãã£ã¿ã䜿çšããŠãèŠèŠçã«SVGãã¹ãäœæã§ããŸãããããã®ããŒã«ã䜿çšãããšãè€éãªåœ¢ç¶ãæç»ãããã®ãã¹ããŒã¿ãCSSã§äœ¿çšããããã«ãšã¯ã¹ããŒãã§ããŸãã
ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
ã¢ãŒã·ã§ã³ãã¹ã¢ãã¡ãŒã·ã§ã³ã䜿çšããéã¯ãã¢ã¯ã»ã·ããªãã£ãèæ ®ããããšãéåžžã«éèŠã§ããã¢ãã¡ãŒã·ã§ã³ã¯ãååºé害ãçºäœæ§çŸæ£ãªã©ãç¹å®ã®é害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠãæ³šææ£æŒ«ã«ãªã£ãããæ¹åæèŠã倱ããããããå¯èœæ§ããããŸãã
- ã¢ãã¡ãŒã·ã§ã³ãäžæåæ¢ãŸãã¯åæ¢ããæ¹æ³ãæäŸããïŒ ãŠãŒã¶ãŒãã¢ãã¡ãŒã·ã§ã³ãéªéã«æããå Žåã«å¶åŸ¡ã§ããããã«ããŸããããŒãžäžã®ãã¹ãŠã®ã¢ãã¡ãŒã·ã§ã³ãç¡å¹ã«ãããã¿ã³ããã°ã«ã¹ã€ããã远å ã§ããŸãã
- ã¢ãã¡ãŒã·ã§ã³ã¯æ§ããã«äœ¿çšããïŒ ã¢ãã¡ãŒã·ã§ã³ãé床ã«äœ¿çšããªãã§ãã ããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããã«äœ¿çšããæ³šæãéžããããã«äœ¿çšããªãããã«çŠç¹ãåœãŠãŠãã ããã
- ç¹æ» ãã¹ããã广ãé¿ããïŒ ãããã®å¹æã¯ãæåæ§ã®é«ãå人ã«çºäœãåŒãèµ·ããå¯èœæ§ããããŸãã
- ã¢ãã¡ãŒã·ã§ã³ãæå³ãæã€ããã«ããïŒ ã¢ãã¡ãŒã·ã§ã³ã¯æç¢ºãªç®çãæããããŠãŒã¶ãŒã«æçšãªæ å ±ãæäŸããã¹ãã§ããåãªãè£ é£Ÿã®ããã«ã¢ãã¡ãŒã·ã§ã³ã䜿çšããªãã§ãã ããã
- é害ãæã€ãŠãŒã¶ãŒãšãã¹ãããïŒ é害ãæã€ãŠãŒã¶ãŒãããã£ãŒãããã¯ãåŸãŠãã¢ãã¡ãŒã·ã§ã³ãã¢ã¯ã»ã¹ããããã䜿ããããã®éå£ã«ãªããªãããšã確èªããŠãã ããã
prefers-reduced-motionã¡ãã£ã¢ã¯ãšãªã䜿çšããŠããŠãŒã¶ãŒãã·ã¹ãã ã§äœ¿çšãããã¢ãã¡ãŒã·ã§ã³ã®éãæå°éã«æããããèŠæ±ãããã©ãããæ€åºã§ããŸãããã®ã¡ãã£ã¢ã¯ãšãªãtrueãšè©äŸ¡ãããå Žåãã¢ãã¡ãŒã·ã§ã³ãç¡å¹ã«ãããã匷床ãäžãããããããšãã§ããŸãã
@media (prefers-reduced-motion: reduce) {
.airplane {
animation: none; /* ã¢ãã¡ãŒã·ã§ã³ãç¡å¹å */
}
}
ã¢ãŒã·ã§ã³ãã¹ã¢ãã¡ãŒã·ã§ã³ã®ãããã°
ã¢ãŒã·ã§ã³ãã¹ã¢ãã¡ãŒã·ã§ã³ã®ãããã°ã¯ãæã«å°é£ãªå ŽåããããŸããäžè¬çãªåé¡ããã©ãã«ã·ã¥ãŒãã£ã³ã°ããããã®ãã³ããããã€ã玹ä»ããŸãïŒ
- SVGãã¹ãæ€æ»ããïŒ ãã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠSVGãã¹ãæ€æ»ããæ£ããå®çŸ©ãããŠããããšã確èªããŸãããã¹ããŒã¿ã«ç¡å¹ãªã³ãã³ããäžæ£ç¢ºãªåº§æšãªã©ã®ãšã©ãŒããªãã確èªããŠãã ããã
offset-pathãšoffset-distanceããããã£ã確èªããïŒoffset-pathããããã£ãæ£ããSVGãã¹èŠçŽ ãæããŠããããšã確èªããŠãã ãããoffset-distanceããããã£ã0%ãã100%ãŸã§ã¢ãã¡ãŒã·ã§ã³ããŠããããšã確èªããŠãã ãããoffset-rotateããããã£ã䜿çšããïŒoffset-rotateããããã£ã«ç°ãªãå€ã詊ããŠããããèŠçŽ ã®åãã«ã©ã®ããã«åœ±é¿ãããã確èªããŸããããã¯ãauto-orientããããã£ã®åé¡ãç¹å®ããã®ã«åœ¹ç«ã¡ãŸãã- ãã©ãŠã¶ã®ã¢ãã¡ãŒã·ã§ã³ã€ã³ã¹ãã¯ã¿ãŒã䜿çšããïŒ ã»ãšãã©ã®ã¢ãã³ãã©ãŠã¶ã«ã¯ãã¢ãã¡ãŒã·ã§ã³ããã¬ãŒã ããšã«ã¹ãããå®è¡ããããŸããŸãªCSSããããã£ã®å€ã調ã¹ãããšãã§ããã¢ãã¡ãŒã·ã§ã³ã€ã³ã¹ãã¯ã¿ãŒããããŸããããã¯ãè€éãªã¢ãã¡ãŒã·ã§ã³ã®ãããã°ã«è²ŽéãªããŒã«ãšãªããŸãã
- ã¢ãã¡ãŒã·ã§ã³ãåçŽåããïŒ è€éãªã¢ãã¡ãŒã·ã§ã³ã®ãããã°ã«åé¡ãããå Žåã¯ãèŠçŽ ã®äžéšãåé€ããããããŒãã¬ãŒã ã®æ°ãæžããããããŠåçŽåããŠã¿ãŠãã ãããããã«ãããåé¡ã®åå ãç¹å®ãããããªããŸãã
çµè«
auto-orientã¯ãCSS Motion Pathå
ã®åŒ·åã§äŸ¡å€ã®ããæ©èœã§ãããèªç¶ã§é
åçãªã¢ãã¡ãŒã·ã§ã³ã®äœæãç°¡çŽ åããŸããèŠçŽ ã远åŸãããã¹ã«åãããŠèªåçã«å転ãããããšã§ãæå°éã®åŽåã§èŠèŠçã«çŽ æŽããã广ãçã¿åºãããšãã§ããŸãããã®æ§æãçè§£ããå®çšäŸãæ¢ããé«åºŠãªãã¯ããã¯ãšã¢ã¯ã»ã·ããªãã£ãèæ
®ããããšã§ãauto-orientãæŽ»çšããŠãããŸããŸãªã¢ããªã±ãŒã·ã§ã³ã§é
åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåµé ã§ããŸãã
Webéçºãé²åãç¶ããäžã§ãCSS Motion Pathãauto-orientã®ãããªãã¯ããã¯ãç¿åŸããããšã¯ãã¢ãã³ã§ã€ã³ã¿ã©ã¯ãã£ãããããŠé
åçãªWebãšã¯ã¹ããªãšã³ã¹ãåµé ããããã«ãŸããŸãéèŠã«ãªããŸãããããã®ãã¯ããã¯ã詊ããããŸããŸãªãŠãŒã¹ã±ãŒã¹ãæ¢ããWebã¢ãã¡ãŒã·ã§ã³ã§å¯èœãªããšã®éçãæŒãåºããŠãã ããã